<template>
  <div class="list-upload-box is-disbled is-table">
    <ul ref="container" class="imglistul" :class="['lang-'+language]" tabIndex="1">
      <li
        v-for="(pic, index) in pics"
        :key="index"
        class="imglist-li"
      >
        <viewer>
          <img
            v-error-img
            class="img-viewer"
            style="width:120px;height:120px;"
            :src="pic.url"
            alt=""
          >
        </viewer>
      </li>
    </ul>
  </div>
</template>
<script>
const DEFAULT_CONFIG = {

}
import { getToken } from '@admin/utils/auth'
export default {
  name: 'ImgViewer',
  props: {
    field: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      pics: []
    }
  },
  computed: {
    language() {
      return this.$store.state.app.language
    }
  },
  watch: {
  },
  mounted: function() {
    if (this.data[this.field] && this.data.REFDATA[this.field + 'NAME']) {
      const imgs = this.data.REFDATA[this.field + 'NAME'].split(',').map(i => {
        // 数据中必须有name和id
        const [name, id] = i.split('|')
        return { name, id }
      })
      this.pics = imgs.map(item => {
        return {
          url: `/api/file/download?id=${item.id}&token=` + getToken(),
          id: item.id,
          name: item.name
        }
      })
    }
  },
  methods: {

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.list-upload-box{
  display: inline-block;
  width: 100%;
}
.is-disbled .imglistul {
  &::before{
    content: ''
  }
}
.is-table{
  min-width: 240px;
  .imglistul{
    padding: 0;
    border: none;
    margin: 0;
    li:nth-child(n+3){
      display: none;
    }
  }
}
.imglistul{
  border: 1px dashed #ccc;
  margin-top: 14px;
  overflow: auto;
  padding: 0 8px 8px 0;
  border-radius: 4px;
  border-style: dashed;
  &:focus{
    border-color: #409EFF;
  }
  &.lang-en-US::before{
    content: 'Supports screenshots, image pasting; supports drag-and-drop uploads.';
  }
  &::before{
    content: '支持截图、图片粘贴；支持拖拽上传';
    position: absolute;
    left: 0px;
    top: -14px;
    font-size: 14px;
    color: #409EFF;
  }
  .imglist-li{
    margin-left: 8px;
    float: left;
    position:relative;
    width:120px;
    height:120px;
    cursor:pointer;
    margin-top:8px;
    border-radius:4px;
    overflow:hidden;
    background:#fbfbfb;
    border: 1px dashed #ccc;
  }
  .imglist-upload{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.del-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 32px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  display: none;
}
.del-btn:hover {
  display: block;
}
.delete {
  color: #fff;
  position: absolute;
  font-size: 14px;
  bottom: 0px;
  right: 3px;
  width: 20px;
  height: 20px;
  z-index: 100;
}
.img-viewer:hover + .del-btn {
  display: block;
}
.avatar-upload{
  float: left;
}
</style>
